
/**
 * 渲染地图
 * @param {*} dom 绑定地图id
 * @returns {void}
 */

import Snap from 'snapsvg-cjs'

class RenderMap {
	dom: HTMLBaseElement
	jsonData: any
	clickCallback: Function
	clickDw: Function
	options: any
	svgMap: any
	mapRatio:any
	constructor(dom: any, jsonData: any, clickCallback: any, clickDw: any) {
		this.dom = dom
		this.jsonData = jsonData.features.map((el: any) => ({
			name: el.properties.name,
			color: el.color,
			x: el.properties.x,
			y: el.properties.y,
		}))
		this.clickCallback = clickCallback
		this.clickDw = clickDw
	}

	setOption(option: any) {
		this.options = option
		this.initial()
	}

	initial() {
		this.operateSvgMap()
	}

	// 获取SVG比值的方法
	getMapRatio() {
		const viewBox = this.svgMap.attr('viewBox')
		// 数字为展示地图区域的宽高 svg可能存在偏移，根据实际地图微调
		if (viewBox) {
			this.mapRatio = Math.max(1, Math.max(viewBox.width / 743.984, viewBox.height / 474))
			// this.mapRatio = 1
		}
	}

	operateSvgMap() {
		Snap.load(`./${this.options.svgPath}`, (svg: any) => {
			// 加载svg
			this.initSvgBase(svg)
		})
	}

	// svg的基本设置
	initSvgBase(svg:any) {
		const ctx = this
		this.dom.append(svg.node)

		// svgMap => svg标签内的id
		this.svgMap = Snap('#svgMap')
		// this.svgMap.width = '774'
		// this.svgMap.height = '474'

		this.getMapRatio()
		const svgMapBj = this.svgMap.select('#pathGroup')
		const path = this.svgMap.selectAll('path')
		// const f1 = this.svgMap.paper.filter(Snap.filter.shadow(this.mapRatio, 6 * this.mapRatio, 0, '#093075', 1))
		const f2 = this.svgMap.paper.filter(Snap.filter.shadow(2 * this.mapRatio, 15 * this.mapRatio, 1, '#D1CBCB', 1))
		const svgMapBjClone = svgMapBj.clone()
		// 给每个区域默认填充色
		// const colorArr = ['#F38C8F', '#ECCE8D', '#F7FD91', '#F7FD91', '#AFE168', '#F8C586', '#F7FD91', '#F38C8F']
		// const colorArr = ['#000000', '#FF3A30', '#FF9502', '#34C758', '#B886F8', '#007AFF', '#BBBBBB', '#FFFFFF']
		path.forEach((value:any, index:any) => {
			value
				.attr({
					fill: this.jsonData[index].color,
					opacity: 1,
					stroke: 'rgba(0, 0, 0, .3)',
					strokeWidth: 1,
				})
				.data('isActive', false)
		})
		const path1 = svgMapBjClone.selectAll('path')
		path1.forEach((value:any, index:any) => {
			const text = this.svgMap.paper.text(this.jsonData[index].x, this.jsonData[index].y, this.jsonData[index].name)
			text.attr({
				style: 'width: 12px; height: 12px; fill: #101010; font-size: 12px; transition: all linear 0.3s;cursor:pointer;',
			})
			const icon = this.svgMap.paper.image('./map/dangwei.png', this.jsonData[index].x + 15, this.jsonData[index].y - 27, 12, 12)
			icon.click(function () {
				// icon.remove()
				ctx.clickDw && ctx.clickDw(index)
			})
			value
				.attr({
					// filter: f1,
					fill: this.jsonData[index].color,
					stroke: 'rgba(0, 0, 0, .3)',
					strokeWidth: 1 * this.mapRatio,
				})
				.click(()=> {
					// 点击进入市级地图
					ctx.clickCallback && ctx.clickCallback(index, this.jsonData[index].name)
				})
				.hover(
					function () {
						// 移入
						value.attr({
							fill: '#acb6ee', // 浅紫色
							
						}).append('rect')
					},
					function () {
						// 移出
						value.attr({
							fill: ctx.jsonData[index].color,
						})
					},
				)
		})
		// 使用默认2像素模糊.select('path')
		svgMapBj.selectAll('path').attr({
			filter: f2,
			// fill: '#0049A1',
			stroke: 'rgba(0, 0, 0, .3)',
			strokeWidth: 1,
		})
		svgMapBjClone.attr({
			id: 'svgMapBjClone',
		})
	}
}

/*
   * 对象对应的属性方法
   * */
// RenderMap.prototype = {

//   /*
//     * 设置图形参数，并且绘制对应的图形
//     * */
//   setOption (option) {
//     this.options = option
//     this.initial()
//   },

//   initial () {
//     this.operateSvgMap()
//   },
//   // 获取SVG比值的方法
//   getMapRatio () {
//     const viewBox = this.svgMap.attr('viewBox')
//     // 数字为展示地图区域的宽高 svg可能存在偏移，根据实际地图微调
//     if (viewBox) {
//       this.mapRatio = Math.max(1, Math.max(viewBox.width / 743.984, viewBox.height / 474))
//     }
//   },
//   operateSvgMap () {
//     Snap.load(`./${this.options.svgPath}`, (svg) => {
//       // 加载svg
//       this.initSvgBase(svg)
//     })
//   },
//   // svg的基本设置
//   initSvgBase (svg) {
//     this.dom.append(svg.node)
//     // svgMap => svg标签内的id
//     this.svgMap = Snap('#svgMap')
//     this.getMapRatio()
//     const svgMapBj = this.svgMap.select('#pathGroup')
//     const path = this.svgMap.selectAll('path')
//     const f1 = this.svgMap.paper.filter(Snap.filter.shadow(this.mapRatio, 6 * this.mapRatio, 0, '#093075', 1))
//     const f2 = this.svgMap.paper.filter(Snap.filter.shadow(2 * this.mapRatio, 8 * this.mapRatio, 2 * this.mapRatio, '#0370A6', 1))
//     const svgMapBjClone = svgMapBj.clone()
//     // 给每个区域默认填充色
//     path.forEach((value) => {
//       value.attr({
//         fill: '#0049A1',
//         opacity: '1',
//         stroke: '#22BDF0',
//         strokeWidth: 1
//       }).data('isActive', false)
//     })
//     svgMapBjClone.selectAll('path')
//       .attr({
//         filter: f1,
//         fill: '#0049A1',
//         stroke: '#22BDF0',
//         strokeWidth: 2 * this.mapRatio
//       })
//     // 使用默认2像素模糊.select('path')
//     svgMapBj.selectAll('path').attr({
//       filter: f2,
//       // fill: '#0049A1',
//       stroke: '#07C8FA',
//       strokeWidth: 2 * this.mapRatio
//     })
//     svgMapBjClone.attr({
//       id: 'svgMapBjClone'
//     })
//   }
// }
export default RenderMap
